import React, { Component } from 'react'
import { Menu } from 'antd'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

const { SubMenu } = Menu

class MySider extends Component {
    render() {
        const { routerList } = this.props
        return (
            <div style={{ width: 200 }}>
                <Menu
                    defaultSelectedKeys={['sub1-1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    theme="dark"
                >
                    {
                        routerList[0].children.map((item, index) => {
                            return <SubMenu key = { 'sub' + (index + 1) } title = { item.title }>
                                {
                                    item.children? item.children.map((items, indexs) => {
                                        return  <Menu.Item key={ 'sub' + (index + 1) + '-' + (indexs + 1) }>
                                            <Link to = { items.path }>{ items.title }</Link>
                                        </Menu.Item>
                                    }): ""
                                }
                            </SubMenu>
                        })
                    }
                </Menu>
            </div>
        )
    }
}

let mapStateToProps = (state) => {
    const { routerList } = state
    return {
        routerList
    }
}

MySider = connect(mapStateToProps)(MySider)

export default MySider
